<template>
  <div v-if="!isViewOrEdit && !isNewModel">
    <layout-card
      v-model="search"
      :filters="ismapOptions"
      headline="信息列表"
      headtitle=" "
      :hasButton="true"
      @search-change="getData"
      @search-reset="searchReset"
    >
      <template #action>
        <el-button type="primary" @click="handleCreate()">新建模板</el-button>
      </template>
      <table-common
        :height="tableHeight"
        :columns="mapListColumns"
        :loading="loading"
        :pagination="pager"
        :table-data="tabledata"
        size="large"
        @current-change="changeCurrent"
        @size-change="changePageSize"
        @sort-change="sortChange"
        width="1700px"
      >
        <!-- 维护图标提示 -->
        <template #houseName="{ row }">
          <el-text type="primary" v-if="remindList.includes(row.houseId)">
            <img
              src=""
              class="img"
              width="18"
              height="18"
              data-v-fae5bece=""
              style="background-color: red"
            />
          </el-text>
          {{ row["houseName"] }}
        </template>
        <template #action="{ row }">
          <!-- 自定义操作栏示例  -->
          <el-button class="link-btn" @click="handleView(row)" link type="primary">查看</el-button>
          <el-button class="link-btn" @click="handleEdit(row)" link type="primary">编辑</el-button>
          <el-button class="link-btn" @click="handleCopy(row)" link type="primary">复制</el-button>
          <el-popconfirm
            title="是否删除?"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="() => DeletRow(row)"
          >
            <template #reference>
              <el-button class="link-btns" link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </table-common>
    </layout-card>
    <!-- 设置弹窗开始 -->
    <el-dialog v-model="thresholdDialogVisible" title="设置" width="500"   center align-center >
    <span>
      设置删除时间:
    </span>
      <div style="margin-left: 20px">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio :label="0">默认</el-radio>
        </el-radio-group>
      </div>
      <div style="margin-left: 20px">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio :label="1">自定义</el-radio>
        </el-radio-group>
      </div>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="thresholdDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="thresholdDialogVisible = false">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
    <!-- 设置弹窗结束 -->
  </div>
  <unit-add @getValue="getUnitAddValue" v-if="isViewOrEdit" :modelId="modelId"></unit-add>
  <new-model @getValue2="getNewModelValue" v-if="isNewModel" :model="model" ></new-model>
</template>

<script lang="ts" setup>
  import { Search } from '@element-plus/icons-vue'
  const radio = ref(0)
  const input3 = ref('')
  const select = ref('')
  const isShow = ref(false)

  const isNewModel = ref(false)
  const isViewOrEdit = ref(false)
  const tableHeight = ref(window.innerHeight - 453)

  const getUnitAddValue = (val:any) => {
    isViewOrEdit.value = val
  }

  const getNewModelValue = (val:any) => {
    isNewModel.value = val
    const listParam = {
      pageNum: 1,
      pageSize: 10
    }
    searchData(listParam);
  }

  /**
   * @radioChange 单选框的改变事件
   * @author
   * @date
   * @version V1.0.0
   * @return
   */
  const radioChange = (value: number ,number : boolean)=> {
     // 选中自定义
     if (value == 1) {
       isShow.value = true
     } else { // 选中默认
       isShow.value = false
     }
    console.log(value)
     console.log(isShow.value)
  }
  import { computed, ref, reactive, onBeforeMount, nextTick, onMounted } from "vue";
  import LayoutCard from "@/components/LayoutCard/index.vue";
  import TableCommon from "@/components/TableCommon/index.vue";
  import {
    houseDeleteRow,
    houseImport,
    append,
    change,
    getUserInfo,
  } from "@/api/eqpt/houseManger";
  import { mapListColumns } from "@/views/secure/archives/model/config/columns";
  import {
    mapOptions,
    dialogOptions,
    mapListFilters,
  } from "@/views/secure/archives/model/config/filters";
  import {
    ElMessage,

  } from "element-plus";

  import FilterBar from "@/components/FilterBar/index.vue";
  import { getResource, postResource } from "@/api/resource";

  import { useStore } from "vuex";
  // 地图控件
  import mapControl from "@/components/map/index.vue";
  import { store } from "@/components/map/mapStore";
  import UnitAdd from "@/views/secure/archives/model/unitAdd.vue";
  import NewModel from "@/views/secure/archives/model/newModel.vue";
  import {securityTemplateListPage,deleteModel,copyModel} from "@/api/secure/securityTemplateManager"

  const stores = useStore();
  const organTree = stores.state.user.organTree; // 获取树
  const isdialogOptions = ref(dialogOptions);
  const ismapOptions = ref(mapOptions);
  const ismapListFilters = ref(mapListFilters);
  const thresholdDialogVisible = ref(false);
  const emit = defineEmits(["getFormJson"]);
  const addTilte = ref(""); // 弹出框名称
  const model = ref(null);
  const modelId = ref(null)

  // 获取登录用户信息
	const { getters } = useStore();
	// 用户信息
	const UserInfo = computed(() => getters['user/getUserInfo']);

  //初始化调用方法
  onMounted(() => {
    const listParam = {
      pageNum: 1,
      pageSize: 10
    }
    searchData(listParam);
  })

  // 分页和数据展示参数
  const current = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const tabledata = ref([]);
  const search = ref({
    houseType:null,
    region:null,
    state:null
  });
  const pager = computed(() => ({
    currentPage: current.value,
    pageSize: pageSize.value,
    total: total.value,
    pageCount:
      Math.ceil(total.value / pageSize.value) === 0
        ? 1
        : Math.ceil(total.value / pageSize.value),
  }));

  /**
   * @functionName 分页、查询、排序、删除功能
   * @author 杜思成
   * @date 2023-08-08 17:46:09
   * @version V1.0.0
   */
  const changeCurrent = (value: number) => {
    current.value = value;
    getData();
  };
  const changePageSize = (size: number) => {
    pageSize.value = size;
    getData();
  };
  const order = ref([
    {
      column: "state",
      method: "asc",
    },
    {
      column: "lastUpdateTime",
      method: "desc",
    },
  ]);
  /**
   * @functionName 获取数据
   * @author 彭庆楠
   * @date 2023-08-08 17:47:31
   * @version V1.0.0
   * @return
   */
  const getData = async () => {
    const listParam = {
      condition: {
        modelName: search.value.modelName,
        creatUserName: search.value.createUserName,
        startTime: search.value.creatTime != undefined ? search.value.creatTime[0] : null,
        endTime: search.value.creatTime != undefined ? search.value.creatTime[1] : null
      },
      pageNum: current.value,
      pageSize: pageSize.value
    }
    searchData(listParam)
  };

//查询数据
  const searchData = (listParam:any) => {
    //查询
    securityTemplateListPage(listParam).then(res => {
      if(res.code === '1') {
        tabledata.value = res.data.list
        total.value = res.data.total
      }
    })
  }

  /**
   * @functionName 排序事件
   * @param {any} data 传入的某一列的列名和升降序
   * @author 彭庆楠
   * @date 2023-08-17 17:48:41
   * @version V1.0.0
   * @return
   */
  const sortChange = (data: any) => {
    const method = data.order === "ascending" ? "asc" : "desc";
    order.value[0].column = data.prop;
    order.value[0].method = method;
    getData();
  };
  // 删除
  const DeletRow = (row: any) => {
    const id = row.id
    deleteModel(id).then(res => {
      if(res.code === '1') {
        ElMessage.success(res.message)
        getData()
      }else {
        ElMessage.error(res.message)
      }
    })
  };

  /**
   * @functionName 新增、编辑弹出框
   * @param {any} val 判断打开那个弹窗
   * @description
   * @author 彭庆楠
   * @date 2023-08-08 17:53:22
   * @version V1.0.0
   * @return
   */
  const handleCreate = () => {
    isNewModel.value = true
    model.value = null
  };
  const handleView = async (row: any) => {
    isViewOrEdit.value = true
    modelId.value = row.id
  };
  //编辑
  const handleEdit = async (row: any) => {
    isNewModel.value = true
    model.value = row.id
  };
  //复制
  const handleCopy = async (row: any) => {
    const paramsCopy = {
      id: row.id,
      createUserId: Number(UserInfo.value.userId),
      modelName: row.modelName,
      createUserName: UserInfo.value.userName
    }
    copyModel(paramsCopy).then(res => {
      if(res.code === '1') {
        ElMessage.success(res.message)
        getData()
      }else {
        ElMessage.error(res.message)
      }
    })
  };
  const FilterRef = ref({});

  /**
   * @functionName 重置功能
   * @param {FilterDataType} data
   * @description
   * @author 杜思成
   * @date 2023-08-17 17:55:57
   * @version V1.0.0
   * @return
   */
  const searchReset = (data: FilterDataType) => {
    search.value = data;
    pager.value.currentPage = 1;
    pager.value.pageSize = 10;
    getData();
  };
</script>
<style scoped>

:deep(.el-table__header-wrapper .el-table__header),:deep(.el-table__body) {
  /* width: 1700px !important; */
  text-align: center !important;
}
:deep(.el-tooltip) {
  width: auto !important;
}
.form {
  .el-input {
    width: 150px;
  }
}
.link-btn{
  color: #2F7DF1;
}

.link-btns{
  color:#F24A45;
}

</style>
